<template>
    <div class="pb-108 no_touch trade">
        <!-- <div class="px-30 pt-20">
            <div class="flex h-88 w-full box-border border-solid-grey rounded-lg">
                <div @click="$router.push('/exchange/exchangePage')"
                    class="font-bold font-32 flex justify-center items-center flex-1">
                    <span class="h-60 lh-60 font-16  px-40 borderColor rounded-lg textColor">{{ $t('闪兑') }}</span>
                </div>
                <div class="font-bold flex font-32 justify-center items-center flex-1">
                    <span class="h-60 lh-60 btnMain px-40 rounded-lg text-white font-16">{{ $t('现货') }}</span>
                </div>
                <div @click="$router.push({ path: '/wantBuy', query: { frompath: `/trade/${symbol}` } })"
                    class="font-bold font-32 flex justify-center items-center flex-1">
                    <span class="h-60 lh-60 font-16  px-40 borderColor rounded-lg textColor">c2c</span>
                </div>
            </div>
        </div> -->
        <!-- :key="symbol"-->
        <!-- 头部区 -->
        <trade-head :backFunc="() => $router.push('/')" :symbol="symbol" :price="price" :range="range" :isTrade="true"
            @update-coin="onUpdate" @data="quote = $event" />

        <div class="trade-buy-sell flex justify-between px-30 py-30">
            <trade-order-area :symbol="symbol" :init-open="initOpen" :init-close="initClose" :price="price"
                @ordered="onOrdered" />
            <keep-alive>
                <trade-deep-data :selectValue="selectValue" @getList="getList" :showType="showType" :symbol="symbol"
                    v-if="symbol" :price="price" class="w-290 ml-30" />
            </keep-alive>
        </div>
        <div class="flex k-select-box">
            <div class="mt-20 mb-22 select-box" style="position:relative; border-radius: 6px !important;">
                <div class=" flex justify-between  items-center w-full h-70" @click="selectBtn">
                    <!-- <img src="@/assets/image/public/warn.png" alt="warn-icon" class="w-25 h-25 pl-20"/> -->
                    <div class="pl-16 textColor" style="width:80%;color: #fff !important;">{{ title }}</div>
                    <img src="@/assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 pr-20" />
                </div>
                <div class="option-box" v-show="isShow">
                    <div class="font-30" v-for="(item, index) in sortList" :key="index" @click="selectItem(item)">{{
                        item.name
                    }}
                    </div>
                </div>
            </div>
            <div @click="isSelectShow = true">
                <img src="@/assets/image/selectIcon.png" alt="warn-icon" style="width: 4.4rem;" />
            </div>
        </div>
        <!-- <div class="h-16 diviLine"></div> -->
        <div>
            <div class="flex justify-between pb-20 border-b-color items-center"
                style="border-color: #212121 !important;">
                <div class="flex  pl-30">
                    <template>
                        <div class="px-10 py-10 flex items-center text-grey" @click="tabClick('1')"
                            :class="tabType == '1' ? 'active-line' : ''">{{ $t('当前委托') }}<span v-if="tabType == '1'">({{
                                entrustList.length }})</span> <van-icon name="play" style="transform: rotate(90deg);" />
                        </div>
                        <div class="px-10  ml-50  py-10 flex  items-center text-grey" @click="tabClick('3')"
                            :class="tabType == '3' ? 'active-line' : ''">{{ $t('历史委托') }}</div>
                        <div class="px-10 py-10 flex items-center  ml-50 text-grey" @click="tabClick('2')"
                            :class="tabType == '2' ? 'active-line' : ''">{{ $t('资产') }}</div>
                    </template>
                </div>
                <img src="../../assets/image/public/record.png" alt="record-img" class="w-32 pr-30 "
                    @click="goHistory" />
            </div>
        </div>
        <div class="pl-32 pr-32 pb-100" v-if="tabType == '1'">
            <entrust-item v-for="item in entrustList" :key="item.order_no" :entrust="item" state="submitted"
                @cancelOrder="cancelOrder" />
        </div>
        <div class="pl-32 pr-32 pb-100" v-else-if="tabType == '3'">
            <history-item v-for="item in entrustList" :key="item.order_no" :coinPrice="coinPrice" :entrust="item"
                :state="item.state" @cancelOrder="cancelOrder" />
        </div>
        <div class="pl-32 pr-32" v-else>
            <div class="mb-20 border-b">
                <p class="font-28 text-grey mt-24 mb-42">{{ $t('当前币对资产') }}</p>
                <ul>
                    <li v-for="item in pairsList" :key="item.symbol" class="flex justify-between py-10">
                        <div class="flex items-center">
                            <img :src="item.symbol ? `${HOST_URL}/symbol/${item.symbol}.png` : require('@/assets/loading-default.png')"
                                class="w-52 h-52 rounded-full mr-16" />
                            <p class="flex flex-col">
                                <strong class="font-28 textColor mb-6">{{ item.symbol.toUpperCase() }}</strong>
                                <span class="font-20 text-grey">{{ item.full_name }}</span>
                            </p>
                        </div>
                        <div class="flex flex-col items-end text-grey">
                            <strong class="font-28 textColor mb-6">{{ item.volume }}</strong>
                            <span class="font-20 text-grey">
                                {{ currency.currency_symbol }}
                                {{ item.usdt ? (item.usdt * currency.rate).toFixed(2) : '0.0' }}
                            </span>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="mb-60 border-b">
                <p class="font-28 text-grey mt-24 mb-42">{{ $t('其他非0资产') }}</p>
                <ul>
                    <li v-for="item in no_zeroList" :key="item.symbol" class="flex justify-between py-10">
                        <div class="flex items-center">
                            <img :src="item.symbol ? `${HOST_URL}/symbol/${item.symbol}.png` : require('@/assets/loading-default.png')"
                                class="w-52 h-52 rounded-full mr-16" />
                            <p class="flex flex-col">
                                <strong class="font-28 textColor mb-6">{{ item.symbol.toUpperCase() }}</strong>
                                <span class="font-20 text-grey">{{ item.full_name }}</span>
                            </p>
                        </div>
                        <div class="flex flex-col items-end">
                            <strong class="font-28 textColor mb-6">{{ item.volume }}</strong>
                            <span class="font-20 text-grey">
                                {{ currency.currency_symbol }}
                                {{ item.usdt ? (item.usdt * currency.rate).toFixed(2) : '0.0' }}
                            </span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div v-if="tabType == '1' && !entrustList.length"
            class="flex flex-col justify-center items-center pt-185 pb-100">
            <img src="@/assets/image/assets-center/no-data.png" alt="no-date" class="w-180" />
            <p style="color: #fff;margin-top: 10px;">{{ $t('暂无可用资金') }}</p>
        </div>
        <!--        <div class="fixed w-full shadow z-10 tabBackground1">
            <div class="flex justify-between px-30 py-10">
                <span class="font-24 textColor2">{{ symbol.toUpperCase() }}/USDT&nbsp;{{ $t('k线图表') }}</span>
                <van-icon class="textColor" @click.stop="showCharts = !showCharts"
                    :name="showCharts ? 'arrow-down' : 'arrow-up'"></van-icon>
            </div>
            <k-line-charts :update-key="updateKey" :update-data="quote" :symbol="symbol" v-if="symbol && showCharts"
                :showBottom="false" />
        </div>-->
        <van-action-sheet v-model="isSelectShow" @select="onSelect" :actions="actions" :cancel-text="$t('取消')"
            close-on-click-action @cancel="onCancel" />
    </div>
</template>

<script>
import TradeHead from '@/components/trade-head/index.vue'
import TradeOrderArea from '@/components/trade-order-area/index.vue'
import TradeDeepData from '@/components/trade-deep-data/index.vue'
import EntrustItem from '@/components/entrust-item'
import KLineCharts from '@/components/kline-charts'
import historyItem from '@/components/history-item'

import Axios from '@/API/trading'
import { _getHomeList } from '@/API/home.api'
import { Popup, Swipe, SwipeItem, Circle, Icon, ActionSheet } from 'vant';
import { mapActions, mapGetters } from 'vuex'
import { SET_COIN_LIST } from '@/store/const.store'
import { WS_URL, HOST_URL } from '@/config'
import TradeApi from "@/API/trading.js";
import { getStorage } from '@/utils/utis'

export default {
    name: "TradePage",
    components: {
        TradeHead,
        TradeOrderArea,
        TradeDeepData,
        [Popup.name]: Popup,
        [Swipe.name]: Swipe,
        [SwipeItem.name]: SwipeItem,
        [Circle.name]: Circle,
        [Icon.name]: Icon,
        [ActionSheet.name]: ActionSheet,
        EntrustItem,
        KLineCharts,
        historyItem
    },
    computed: {
        ...mapGetters('user', ['userInfo']),
        ...mapGetters({
            coinList: 'home/coinList',
            currency: 'home/currency'
        }),
    },
    data() {
        const initArr = []
        for (let i = 0; i < 8; i++) {
            initArr.push({
                volume: '--',
                price: '--'
            })
        }
        return {
            HOST_URL,
            quote: {},
            showCharts: false,
            updateKey: 1,
            initTimer: null,
            keyIndex: 0,
            timeout: null,
            timer: null, // 底部持仓等的公用定时器
            symbol: '',
            price: '',
            range: '',
            initOpen: {},
            initClose: {},
            asks: initArr, // 卖单
            bids: initArr, // 买单
            orderCur: [], // 当前委托
            orderHold: [], // 持有仓位
            futrueHold: [], // 交割持仓
            futrueHistroy: [], // 交割历史
            socket: null, // 行情
            sockets: {
                quotes: null, // 行情
                deep: null /// 深度
            },
            curTab: '', // 当前委托还是持有仓位
            selectIndex: 1, // 当前tab
            initFutrue: {}, /// 交割合约
            show: false, // popup
            entrustList: [], //当前委托订单
            tabType: 1,
            no_zeroList: [], //其他非0资产数组
            pairsList: {}, //当前资产
            // curRequest: [], //
            isShow: false,
            title: 1,
            isSelectShow: false,
            actions: [{ name: this.$t('默认'), value: 0, className: 'actions-active' }, { name: this.$t('展示买单'), value: 1, className: "" }, { name: this.$t('展示卖单'), value: 2, className: '' }],
            showType: 0,
            sortList: [],
            selectValue: 0,
            coinPrice: 0,

        }
    },
    async created() {
        if (!this.coinList.length) {
            await this.SET_COIN_LIST()
        }
    },
    methods: {
        ...mapActions('home', [SET_COIN_LIST]),
        onUpdate(symbol) { // 更新
            this.symbol = symbol
            this.closeSocket()
            this.init(symbol)
        },
        getCoinPrce(val) {
            _getHomeList(val).then((res) => {
                this.coinPrice = res[0].close
            })
        },
        tabClick(type) {
            this.tabType = type;
            this.entrustList = []
            if (type == 2) {
                if (!this.userInfo.token) {
                    this.$router.push('/login')
                } else {
                    this.getWallet()
                }
            } else {
                this.getOrderList()
            }
        },
        onOrdered(evt) { // 下单过后的回调
            this.clearTimer()
            // this.clearTimeout()
            this.initParam(this.symbol, evt) // 重新初始化
            //console.log('下单后更新数据')
        },
        onTab(evt) { // 点击tab后的回调
            // console.log('evt', evt)
            this.clearTimer()
            // this.clearTimeout()
            this.curTab = evt
            this[evt](this.symbol)
        },
        handleQoutes(data) {
            if (data && data.length) {
                const cur = data[0]
                this.price = cur.close
                this.range = cur.change_ratio + ''
                this.quote = cur
                this.updateKey++
            }
        },
        startQuoteSocket() { // 行情socket
            // console.log('symbol', this.symbol)
            if (!this.symbol) {
                return
            }
            this.socket = new WebSocket(`${WS_URL}/1/${this.symbol}`)
            this.socket.onmessage = (evt) => {
                const { data } = evt
                const { code, data: _data } = JSON.parse(data)
                if (code / 1 === 0) {
                    this.handleQoutes(_data)
                }
            }
        },
        initParam(symbol, type) { // 初始化参数
            if (this.userInfo.token) {
                this.getOrderList();
                this.getWallet()
                if (type === 'open' || !type) {
                    //console.log('开仓数据')
                    Axios.tradeBuyToken({})
                        .then(res => {
                            this.initOpen = res.data
                            // console.log(this.initOpen.volume, res.data.volume, type)
                        })
                }
                if (type === 'close' || !type) {
                    Axios.tradeSellToken({
                        symbol
                    }).then(res => {
                        this.initClose = res.data
                    })
                }
            }
        },
        init(symbol) { // 初始化页面
            this.symbol = symbol.toLowerCase()
            if (!this.socket) {
                this.startQuoteSocket()
            }
            this.initParam(symbol) // 'open'
            this.getCoinPrce(symbol)
        },
        closeSocket() {
            this.socket && this.socket.close()
            this.socket = null
        },
        clearTimer() {
            clearInterval(this.timer)
            this.timer = null
        },
        tradeBuy() {
            Axios.tradeBuy({
                volume: 1,
                session_token: '',
                symbol: '',
                price: 1,
                order_price_type: '' //limit限价  opponent市价
            }).then((res) => {
                // console.log(res);
            }).catch((error) => {
                if (error.code === 'ECONNABORTED') { this.$toast(this.$t('网络超时！')); }
                else if (error.msg !== undefined) { this.$toast(this.$t(error.msg)); }
            });
        },
        getOrderList() {
            this.clearTimer()
            let type = this.tabType == 1 ? 'orders' : 'hisorders'
            this.apiGetOrderList(type)
            this.timer = setInterval(() => {
                this.apiGetOrderList(type)
            }, 1000);
        },
        apiGetOrderList(type) {
            TradeApi.tradeRecord({
                page_no: 1,
                symbol: this.$route.params.symbol,
                type: type
            }).then(res => {
                // console.log(res.data);
                this.entrustList = res.data
            }).catch(() => {

            })
        },
        cancelOrder(order) {
            TradeApi.tradeCancel({
                order_no: order,
            }).then(res => {
                this.initParam(this.symbol)
                this.$toast(this.$t('成功'))
            }).catch(() => {

            })
        },
        getWallet() {
            TradeApi.getPairs({
                pairs: `${this.symbol}/usdt`
            })
                .then(res => {
                    this.pairsList = res.data.pairs;
                    this.no_zeroList = res.data.no_zero;
                })
        },
        goHistory() {
            this.$router.push(`/tradeRecord/${this.symbol}`)
        },
        //价格类型下拉框切换
        selectBtn() {
            this.isShow = !this.isShow;
        },
        //选择价格类型
        selectItem(item) {
            this.title = item.name;
            this.isShow = false;
            this.selectValue = item.value
        },
        onSelect(item) {
            this.showType = item.value
            this.actions.map((item) => {
                item.className = ''
            })
            item.className = 'actions-active'
        },
        onCancel() {
            this.isSelectShow = false
        },
        getList(val) {
            if (val.numberLength <= 2) {
                this.title = val.arry[0].name
            } else {
                this.title = val.arry[val.arry.length - 1].name
            }
            this.sortList = val.arry
        }
    },
    beforeRouteEnter(to, from, next) {
        let { params: { symbol } } = to
        // console.log('to', to)
        let catchTradeSymbol = getStorage('tradeSymbol')
        if (catchTradeSymbol) {
            symbol = catchTradeSymbol
        }
        // console.log(catchTradeSymbol)
        if (symbol) {
            next(vm => {
                vm.symbol = symbol
                vm.init(symbol)
            })
        } else {
            next()
        }
    },
    activated() {
        // if (!this.socket) {
        //     this.startQuoteSocket()
        // }
        this.actions = [
            { name: this.$t("默认"), value: 0, className: 'actions-active' },
            { name: this.$t("展示买单"), value: 1, className: '' },
            { name: this.$t("展示卖单"), value: 2, className: '' },
        ]
    },
    deactivated() {
        this.closeSocket()
        this.clearTimer()
    },
    beforeDestroy() {
        this.closeSocket()
        // this.clearTimeout(true)
        this.clearTimer()
    }
}

</script>

<style lang="scss" scoped>
//.list-enter-active, .list-leave-active {
//  transition: all .5s;
//  transform: translateY(30px)
//}
//.list-enter, .list-leave-to
//  /* .list-leave-active for below version 2.1.8 */ {
//  transform: translateY(0)
//}
* {
    color: #fff;
}

.no_touch {
    -webkit-user-select: none;
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;

    @include themify() {
        background: #000000;
    }

    min-height: 100vh;
}

.list-enter-active,
.list-leave-active {
    will-change: transform;
    transition: all 250ms;
}

.list-enter {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
}

.list-leave {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}

.rounded-view {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 0 30px;
    box-sizing: border-box;
}

.my-swipe {
    width: 100%;
}

.active-line {
    position: relative;
    // padding: 15px 0;
    color: #fff;

    @include themify() {
        // background-color: themed("color_main");
    }
}

// .active-line::after {
//     content: '';
//     position: absolute;
//     left: 50%;
//     transform: translateX(-50%);
//     bottom: 0;
//     right: 0;
//     width: 280px;
//     height: 8px;
//        @include themify() {
//            background-color: themed("color_main");
//        }
// }

.shadow {
    bottom: calc(108px + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box;
}

// .textColor {
//     color: #DAD5DC;
// }

.borderColor,
.border-solid-grey {
    @include themify() {
        border: 1px solid themed("border_color");
    }
}


.tabBackground1 {
    @include themify() {
        border: 1px solid themed("border_color1");
    }
}

// 下拉
.option-box {
    position: absolute;
    left: 0;
    right: 0;
    top: 90px;
    width: 100%;

    @include themify() {
        background: #212121;
    }

    text-align: center;
    border-radius: 4px;

    @include themify() {
        color: themed("text_color3");
    }

    z-index: 10;
}

.option-box>div {
    padding: 30px 0;
}

.option-box>div:hover {
    // background-color: #F5F5F5;
}

.k-select-box {
    position: relative;
    top: -130px;
    justify-content: flex-end;
    padding: 0 30px;
    align-items: center;

    .select-box {
        width: 220px;

        @include themify() {
            background: #212121;
        }

        margin-right: 20px;
    }

}

.van-popup {
    @include themify() {
        background: red;
    }
}

.actions-active {
    @include themify() {
        background: themed("color_main") !important;
    }
}

.trade {

    ::v-deep .van-action-sheet__item,
    ::v-deep .van-action-sheet__cancel {

        @include themify() {
            background: themed("input_background1");
        }

        @include themify() {
            color: themed("text_color");
        }
    }

    ::v-deep .van-action-sheet__gap {
        @include themify() {
            background: themed("cont_background");
        }
    }
}
</style>
